<template>
    <div class="container-xxl py-5 mb-2 bg-dark page-header bg-3">
        <div class="container my-5 pt-5 pb-4">
            <h1 class="display-3 text-white mb-3 animated slideInDown"> 行业领域 </h1>
            <p class="text-white fs-4">专注、迅捷、成就、分享</p>
        </div>
    </div>
    <!-- Header End -->
    <div class="container-xxl bg-dark mb-5">
        <div class="container">
            <div class="d-flex flex-wrap align-items-center guid-links">
                <div
                    v-for="(item, index) in categoryList"
                    class="p-4 text-white"
                    :class="{ actived: index === hashKey }"
                    :key="index"
                    @mouseenter="handleClick(index)"
                    >{{ item[0] }}</div
                >
            </div>
        </div>
    </div>
    <!-- About Start -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6">
                    <h2 id="categoryTitle" class="mb-0 wow fadeInUp" data-wow-delay="0.6s">
                        {{ categoryList[hashKey][0] }}
                    </h2>
                    <p id="categoryDes" class="mb-4 wow fadeInUp" data-wow-delay="0.6s">
                        {{ categoryList[hashKey][1] }}
                    </p>
                    <p class="mb-4 wow fadeInUp" data-wow-delay="0.8s">
                        行业的规模效应、网络效应，使得资金与人才的大量涌入，不断创新的技术与细分领域的游戏、视频、文娱、教育、金融等行业与互联网融合，人才的招聘需求从通常的技术、产品、运营岗位到不断垂直化、品牌化、本土化。
                    </p>

                    <p class="wow fadeInUp" data-wow-delay="1.2s">
                        佑恩咨询的顾问从产业视角聚焦，不断关注行业新技术、新产品的变化，不断专注与持续积累，为各类综合大型互联网公司、独角兽、快速发展的小而美的企业带来更多人才应用新变化
                    </p>
                </div>
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                    <div class="row g-0 rounded overflow-hidden">
                        <img
                            id="categoryBanner"
                            class="img-fluid w-100"
                            style="height: 300px"
                            :src="getPath(`/images/catrgory/c${hashKey + 1}.jpg`)"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- About End -->
</template>

<script setup lang="ts">
    import { ref, onMounted } from 'vue';
    import { useRoute } from 'vue-router';
    const baseUrl = import.meta.env.VITE_APP_CONTEXT_PATH;

    const route = useRoute();

    const hashKey = ref(0);

    const categoryList = [
        ['互联网.游戏.软件', 'INTERNET.GAME.SOFTWARE'],
        ['新能源.汽车.制造', 'New Energy Motor vehicle Manufacturing'],
        ['电子.通信.硬件', 'Electronic Communication Hardware'],
        ['新消费.新零售', 'INTERNET.GAME.SOFTWARE'],
        ['人力.财务.法务', 'INTERNET.GAME.SOFTWARE'],
        ['制药.医疗.健康', 'INTERNET.GAME.SOFTWARE'],
        ['工业.能源.化工', 'INTERNET.GAME.SOFTWARE']
    ];

    const getPath = (path: string) => {
        return baseUrl + path;
    };

    const handleClick = (at: number) => {
        hashKey.value = at;
    };

    onMounted(() => {
        hashKey.value = Number(route.hash.split('#')[1]) - 1;
    });
</script>

<style>
    .guid-links .actived {
        background-color: var(--primary);
        color: #fff;
    }

    .guid-links div {
        cursor: pointer;
    }

    .dropdown-item:active {
        color: #fff;
        background-color: var(--primary);
    }
</style>
